<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar" :style="{ height: navBarHeight + 'px' }">
				<image class="logo" src="/static/logo.png" mode="widthFix"></image>
				<view>{{PAGE_TITLE}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'TopTitle',
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
				navBarHeight: 82+11,
				// 计算顶部图标距离
				topIconDistance:0,
			};
		},
		//第一次加载时调用
		created() {
			this.getTopIconDistance()
		},
		mounted() {
			this.initPageTitle()
		},
		methods:{
			getTopIconDistance() {
			  uni.getSystemInfo({
			    success: (res) => {
			      // 获取手机顶部状态栏的高度
			      this.statusBarHeight = res.statusBarHeight || 0;
			      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				  // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
			      this.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;
			      // 计算顶部图标距离
			      this.topIconDistance = this.statusBarHeight + this.navBarHeight;
			      // 打印顶部图标距离
			      console.log('顶部图标距离:', this.topIconDistance);
			    },
			    fail: (err) => {
			      console.error('获取系统信息失败:', err);
			    },
			  });
			},
			//初始化页面标题
			initPageTitle(){
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route+'.html'; // 获取当前页面路由
				let pageTitle
				if(__wxConfig.page){
					pageTitle=__wxConfig.page[currentRoute].window.navigationBarTitleText//获取当前页面标题
				}
				//若page.json未定义标题或使用了默认标题，则重写标题
				if(
					pageTitle=='uni-app'
					||pageTitle==''
				){	
					this.PAGE_TITLE = this.APP_NAME
					pageTitle=this.APP_NAME
				}else{
					this.PAGE_TITLE = pageTitle
				}
			},
		}
	}
</script>

<style style="scss" scoped>
.navBarBox{}
.navBar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.statusBar{
	
}
.logo {
	width: 40rpx;
	border-radius: 8rpx;
	margin: 0 20rpx 0 0;
}
</style>
